[#include "single/layout/layout02/layout.ftl"/]
[@htmlHead]

[/@htmlHead]

[@htmlBody]

<div class="row">
    <div class="col-xs-12">
        <ul id="myTab" class="nav nav-tabs">
            <li>
                <a href="${base}/area/view/index">
                    地区列表
                </a>
            </li>
            [#if "add"==operateType]
                <li class="active"><a href="javascript:void(0)">地区增加</a></li>
            [#else ]
                <li class="active"><a href="javascript:void(0)">地区编辑</a></li>
            [/#if]
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">

        <form class="form-horizontal" action="${base}/area/view/update" method="post" id="editForm">
            <input type="hidden" name="id" id="id" value="${area.id}"/>
            <div class="form-group">
                <label class="col-xs-10 col-sm-4 control-label ">上级区域</label>

                <div class="col-xs-10 col-sm-4  ">
                    <div class="input-group input-large">
                        [#if ar??]

                            <input id="areaName" name="areaName" value="${ar.name}" placeholder="" readonly
                                   class="form-control "/>
                            <span class="input-group-btn" onclick="component.area.choose('选择地区','areaId','areaName')">
                                <button type="button" class="btn  blue"><i class="fa fa-search"></i></button>
                            </span>
                            <input id="areaId" name="parentId" value="${ar.id}" type="hidden"/>

                        [#else]
                            <input id="areaName" name="areaName" value="---顶级区域---" placeholder="" readonly
                                   class="form-control "/>
                            <span class="input-group-btn" onclick="component.area.choose('选择地区','areaId','areaName')">
                                <button type="button" class="btn  blue"><i class="fa fa-search"></i></button>
                            </span>
                            <input id="areaId" name="parentId" value="-1" type="hidden"/>

                        [/#if]


                    </div>
                </div>
            </div>
            <div id="editAlert" class="" style="min-width:550px"></div>
            <div class="form-group">
                <label class="col-xs-10 col-sm-4 control-label "><span class="required">*</span>区域名称</label>

                <div class="col-xs-10 col-sm-4  ">
                    <input id="name" name="name" value="${area.name}" placeholder="名称"
                           class="form-control input-large"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-10 col-sm-4 control-label "><span class="required">*</span>区域编码</label>

                <div class="col-xs-10 col-sm-4  ">
                    <input id="code" name="code" value="${area.code}"
                           placeholder="[#if ar.code??]${ar.code}[#else ]区域编码[/#if]"
                           class="form-control input-large" maxlength="6"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-10 col-sm-4 control-label "><span class="required">*</span>排序</label>

                <div class="col-xs-10 col-sm-4  ">
                    <input id="sort" name="sort" value="${area.sort}" placeholder="排序"
                           class="form-control input-large" maxlength="8"/>
                </div>
            </div>


            <div class="form-group">

                <label class="col-xs-10 col-sm-4 control-label ">是否启用</label>

                <div class="col-xs-10 col-sm-4  ">
                    <div class="btn-group" role="group">
                        [#if area.isEnabled=='0']
                            <button class="btn btn-sm" type="button" value="1">开启</button>
                            <button class="btn btn-success btn-sm" type="button" value="0">禁用</button>
                            <input type="hidden" name="isEnabled" value="1"/>
                        [#else]
                            <button class="btn btn-success btn-sm" type="button" value="1">开启</button>
                            <button class="btn btn-sm" type="button" value="0">禁用</button>
                            <input type="hidden" name="isEnabled" value="1"/>
                        [/#if]
                    </div>
                </div>
            </div>


            <div class="form-group">
                <label class="col-xs-10 col-sm-4 control-label ">区域描述</label>

                <div class="col-xs-10 col-sm-4  ">
                    <textarea class="form-control input-large" name="description" id="description"
                              style="text-align: left;">${area.description}</textarea>
                </div>
            </div>

            <div class="form-group">
                <label class=" col-xs-10 col-sm-4  control-label"></label>
                <div class="col-xs-10 col-sm-4 " align="center">
                    <input type="button" class="btn btn-info btn-sm" value="确定" onclick="doSubmit('${operateType}')"/>
                    <input type="button" onclick="tools.goto('${base}/area/view/index')" class="btn btn-cancle btn-sm"
                           value="返回"/>
                </div>
            </div>
        </form>

    </div>
</div>

[/@htmlBody]

[@htmlFoot]
    [#include "common/validate.ftl"/]
<script src="${jpath}/assets/public/plugins/dialog/bootbox.js" type="text/javascript"></script>
<script src="${base}/plugins/single/js/module/area/area.js" type="text/javascript"></script>

<script type="text/javascript">
    if (typeof component == "undefined" || typeof component.area == "undefined") {
        if (typeof component == "undefined") {
            var component = {"area": {}};
        } else {
            component.area = {};
        }
        component.area.choose = function (title, idField, textField) {
            var url = base + "/area/view/toTreeList?idField=" + idField + "&textField=" + textField;
            var buttons = {
                btnOk: {
                    label: '确定',
                    callback: function () {
                    }
                },
                btnCancel: {
                    label: '取消',
                    callback: function () {
                    }
                }
            }
            $.messager.dialog({url: url, title: title, buttons: {}, iframe: {width: 368, height: 450}});
        }
    }
</script>
[/@htmlFoot]
